<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图-延迟加载</title>
		<!-- 轮播图--页面行为 JavaScript   功能效果一致
		            框架 Jquery            功能效果一致【简化开发】
					terseBannerJs建立在Jquery基础之上，快速制作轮播图
		 -->
		 <link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<!-- 轮播图 id和class命名问题，提醒：重名 -->
		<!-- 1.轮播图主空间区域 -->
		<div class="main">
			<!-- 2.id="animation"轮播空间范围 -->
			<div id="animation"></div>
			<!-- 3.class="container"针对轮播添加效果功能 -->
			<div class="container">
				<!-- 4.class="banner"针对轮播图效果功能
				     id="lazyload"轮播图功能为：延迟加载 -->
				<div class="banner" id="lazyload">
					<!-- 5.放图片 -->
					<ul>
						<li><img src="img/banner01.jpg" alt="1"></li>
						<li><img src="img/banner02.jpg" alt="2"></li>
						<li><img src="img/banner03.jpg" alt="3"></li>
						<li><img src="img/banner04.jpg" alt="4"></li>
						<li><img src="img/banner05.jpg" alt="5"></li>
					</ul>
				</div>
			</div>
		</div>
		<script src="js/highlight.pack.js"></script>
		<script src="js/jquery-1.11.1.js"></script>
		<script src="js/jquery.terseBanner.min.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>

<nav id="m2">
				 <nav class="m2_left">
					 <ul>
						 <div class="out"></div>
						 <ol>
					 	<li><a href="#">手机 平板 电话卡 ></a></li>
						<li><a href="#">电视 盒子 ></a></li>
						<li><a href="#">路由器 智能硬件 ></a></li>
						<li><a href="#">移动电源 插线板 ></a></li>
						<li><a href="#">耳机 音箱 ></a></li>
						<li><a href="#">电池 存储卡 ></a></li>
						<li><a href="#">保护套 后盖 ></a></li>
						<li><a href="#">贴膜 其他配件 ></a></li>
						<li><a href="#">米兔 服装 ></a></li>
						<li><a href="#">箱包 其他周边 ></a></li>
						</ol>
					 </ul>
				 </nav>
				 <!-- 右侧：轮播图，结构化元素：图片、图标、代码片段 -->
				 <figure>
					 <div class="fly">
					 	<div id="animation"></div>
					 	<div class="container">
					 		<div class="banner" id="lazyload">
					 			<ul>
					 				<li><img src="img/banner01.jpg" alt="1"></li>
					 				<li><img src="img/banner02.jpg" alt="2"></li>
					 				<li><img src="img/banner03.jpg" alt="3"></li>
					 				<li><img src="img/banner04.jpg" alt="4"></li>
					 				<li><img src="img/banner05.jpg" alt="5"></li>
					 			</ul>
					 		</div>
					 	</div>
					 </div>
					 <script src="js/highlight.pack.js"></script>
					 <script src="js/jquery-1.11.1.js"></script>
					 <script src="js/jquery.terseBanner.min.js"></script>
					 <script src="js/script.js"></script>
				 </figure>
			 </nav>
			 
			 
			 
			
			 /* m2左侧 */
			 main nav#m2 nav.m2_left{
			 	width: 220px;
			 	height: 415px;
			 	background: #8c8c8c;
			 	float: left;
			 	font-size: 12px;
			 	text-align: center;
			 	line-height: 40px;
			 }
			 main nav#m2 nav.m2_left ul ol{
			 	width: 213px;
			 	height: 400px;
			 	background: #8c8c8c;
			 	margin-top: 10px;
			 }
			 main nav#m2 nav.m2_left ul ol li a{
			 	width: 213px;
			 	height: 40px;
			 	color: #ffffff;
			 }
			 main nav#m2 nav.m2_left ul ol li:hover{
			 	background: #ff8725;
			 }
			 main nav#m2 nav.m2_left ul div.out{
			 	width: 480px;
			 	height: 414px;
			 	border: 1px solid red;
			 	position: absolute;
			 	left: 252px;
			 	margin-top: -10px;
			 	display: none;
			 }
			